<template>
  <div class="tablebox">
    <div class="table-head">
      <div class="single-item">所属企业</div>
      <div class="single-item">分路名称</div>
      <div class="single-item">发生时间</div>
      <div class="single-item">事件详情</div>
    </div>
    <div class="table-body">
      <vueSeamless :data="lists" class="seamless-warpper" :class-option="optionSingleHeightTime">
        <div class="single-item" :class="operateClassName(item.state)" v-for="(item, index) in lists" :key="index">
          <div class="item">{{item.companyName}}</div>
          <div class="item">{{!!item.deviceName ? item.deviceName: '-'}}</div>
          <div class="item">{{moment(item.happenTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
          <div class="item" :title="item.content">{{filterText(item.content)}}</div>
        </div>
      </vueSeamless>
    </div>
  </div>
</template>
<script>
import vueSeamless from "vue-seamless-scroll"
export default {
  props: {
    lists: {
      type: Array,
      default: () => []
    }
  },
  components: {
    vueSeamless
  },
  methods: {
    operateClassName(s) {
      let classNames = {
        1: "color-green",
        2: "color-red",
        3: "color-red"
      }
      if (s in classNames) return classNames[s]
      else return classNames[1]
    },
    filterText(str) {
      if (str.length > 7) return str.substr(0, 5) + "..."
      return str
    }
  }
}
</script>
